<script setup lang="ts">
import {list} from '@/api/activity'
import {onMounted, ref} from "vue";
import {formatTimestamp} from '@/utils/date'
onMounted(()=>{
  getList()
})
const couponList=ref([])
const getList=()=>{
  list({"type":"2"}).then(res=>{
    couponList.value=res.data;
  })
}
</script>

<template>
<view class="uni-container-coupon">
  <scroll-view scroll-y="true" style="height: 99%;padding-left: 15px;">
    <view v-if="couponList.some(item=>item.couponUsageScope==='0')" class="uni-container-coupon-item" v-for="(item,index) in couponList"
          :key="index" :index="index">
      <view class="uni-container-coupon-item-title"  v-if="item.couponUsageScope==='0'">
        <text style="color: #566B4C;margin-left: 5px;font-weight: bold;">{{item.name}}</text>
        <text style="color: #5A5127;font-size: 13px;">通用</text>
        <text style="color: #675F54;margin-right: 5px;font-size: 13px;" v-if="item.userActivityId==null">待使用</text>
        <text style="color: #675F54;margin-right: 5px;font-size: 13px;" v-else>已使用</text>
      </view>
      <view class="uni-container-coupon-item-date"  v-if="item.couponUsageScope==='0'">
        <text>有效期: {{formatTimestamp(item.couponStartTime)}} 至 {{formatTimestamp(item.couponEndTime)}}</text>
      </view>
    </view>`
    <view v-if="couponList.some(item=>item.couponUsageScope==='1')"  class="uni-container-coupon-item-zhiding"
          v-for="(item,index) in couponList"
          :key="index" :index="index" >
      <view class="uni-container-coupon-item-zhiding-title" v-if="item.couponUsageScope==='1'">
        <text style="color: #566B4C;font-weight: bold;">{{item.name}}</text>
        <text style="color: #5A5127;font-size: 13px;">指定菜单</text>
        <text style="color: #675F54;font-size: 13px;"  v-if="item.userActivityId==null">待使用</text>
        <text style="color: #675F54;font-size: 13px;" v-else>已使用</text>
      </view>
      <view class="uni-container-coupon-item-zhiding-item" v-if="item.couponUsageScope==='1'">
        <text style="margin-right: 10px;"
              v-for="menuname in item.menuNames">{{menuname}}</text>
      </view>
      <view class="uni-container-coupon-item-zhiding-date" v-if="item.couponUsageScope==='1'">
        <text>有效期: {{formatTimestamp(item.couponStartTime)}} 至 {{formatTimestamp(item.couponEndTime)}}</text>
      </view>
    </view>
  </scroll-view>
</view>
</template>

<style scoped lang="scss">
.uni-container-coupon-item-date{
  color: #675F54;
  font-size: 13px;
  text-align: right;
  margin: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
}
.uni-container-coupon-item-zhiding-date{
  color: #675F54;
  font-size: 13px;
  text-align: right;
  margin: 5px;
  margin-bottom: 10px;

}
.uni-container-coupon-item-zhiding-item{
  color: black;
  margin: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.uni-container-coupon-item-zhiding-title{
  margin: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  text-align: left;
  align-items: center;
  font-size: 15px;
  justify-content: space-between;
}
.uni-container-coupon-item-zhiding{
  background-color: whitesmoke;
  width: 93%;
  height: auto;
  padding: 5px;
  font-size: 14px;
  border-radius: 5px;
}
.uni-container-coupon-item-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  font-size: 15px;
}
.uni-container-coupon-item{
  background-color: whitesmoke;
  width: 93%;
  height: auto;
  margin-top: 5px;
  font-weight: normal;
  font-size: 14px;
  padding: 5px;
  border-radius: 5px;
}
.uni-container-coupon{
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局可能有助于高度分配 */
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center;
  background-color: #C9B9AA;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>